@import "common";

@rex-screen : 750;

@orange : #e86c4f;

html{width: auto;margin: 0;}
body{height: auto;background-color: #f3f3f3;display: block;}

//手机端
html,body,#body,.swiper-slide{width: 100%;height: 100%;}

@media (min-width: @sreen) {
    html{width: @sreen;margin: 0 auto;}
}

.btn-winner{
    position: fixed;top: 22/@rem;right: 20/@rem;z-index: 1000;height: 56/@rem;
    img{height: 100%;}
}

.swiper-slide{box-sizing: border-box;background: url("/src/img/face/page2-bg.jpg") center top / cover no-repeat;position: relative;overflow: hidden;
    > *{position: absolute;}
    &.page1{
        background-image: url("/src/img/face/page1-bg.jpg");
        .text1{width: 20/@rem;top: 76/@rem;left: 500/@rem;}
        .text2{width: 318/@rem;top: 100/@rem;left: 200/@rem;}
        .text3{width: 39/@rem;top: 333/@rem;left: 178/@rem;}
        .btn{width: 220/@rem;top: 750/@rem;left: 266/@rem;}
        .bg-1{width: 100%;bottom: 20/@rem;left: 0;animation-duration : 2s;}
    }
    &.page2{
        .title{width: 520/@rem;top: 20/@rem;left: 115/@rem;}
        .step{width: 182/@rem;top: 314/@rem;left: 284/@rem;}
        .sex-men{width: 445/@rem;top: 460/@rem;left: 100/@rem;}
        .sex-women{width: 339/@rem;top: 400/@rem;left: 230/@rem;}
        .choice{
            width: 380/@rem;top: 880/@rem;left: 190/@rem;height: 40/@rem;line-height: 40/@rem;animation-duration: 2s;
            span{float: left;position: relative;font-family: 'FZYanSJW_Zhong';font-size: 32/@rem;
                &:last-child{float: right;}
                &.true:before{
                    content: '';position: absolute;width: 130/@rem;height: 130/@rem;top: -40/@rem;left: -40/@rem;background: url("/src/img/face/sex-checked.png") center / cover no-repeat;
                }
            }
        }
        .btn{width: 275/@rem;top: 1026/@rem;left: 240/@rem;}
    }
    &.page3{
        .title{width: 407/@rem;top: 55/@rem;left: 170/@rem;}
        .step{width: 182/@rem;top: 260/@rem;left: 284/@rem;}
        .lists{
            width: 480/@rem;margin: 0 auto;padding-top: 390/@rem;position: static;
            li{
                text-align: center;font-size: 30/@rem;line-height: 110/@rem;background: url("/src/img/face/page3-check-false.png") 0 16/@rem no-repeat;background-size: 76/@rem;color: rgba(0,0,0,.5);
                &.true{background: url("/src/img/face/page3-check-true.png") 0 0 no-repeat;background-size: 101/@rem;color: inherit;}
                span{margin-left: 42/@rem;}
            }
        }
        .btn{width: 275/@rem;top: 1026/@rem;left: 240/@rem;}
    }
    &.page4{
        .title{width: 370/@rem;top: 25/@rem;left: 190/@rem;}
        .step{width: 182/@rem;top: 300/@rem;left: 284/@rem;}
        .face-box{width: 355/@rem;height: 355/@rem;background: center center / cover no-repeat;top: 458/@rem;left: 205/@rem;
            .cover{
                position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.5) url("/src/img/face/+.png") center / 85/@rem no-repeat;
                &.true{background-image: url("/src/img/face/loading.gif")}
            }
        }
        .text{width: 100%;top: 838/@rem;left: 0;text-align: center;color: #bb3f3f;font-size: 22/@rem;}
        .btn{width: 275/@rem;top: 1026/@rem;left: 240/@rem;}
    }
    //分享页面样式
    &.page5{
        width: 100%;height: 100%;box-sizing: border-box;background: url("/src/img/face/page5-bg.jpg") center top / cover no-repeat;position: relative;
        & > *{position: absolute;}
        .title{top: 40/@rem;left: 80/@rem;font-size: 36/@rem;}
        .share-cont{top: 0;left: 0;width: 100%;}
        .qrcode{top: 437/@rem;left: 428/@rem;width: 150/@rem;padding: 3/@rem;background-color: #fff;box-sizing: border-box;
            img{display: block;width: 100%;}
        }
        .btn{top: 1068/@rem;left: 240/@rem;width: 275/@rem;}
        .home{top: 880/@rem;left: 165/@rem;width: 40/@rem;height: 150/@rem;}
        .pic{width: 382/@rem;height: 382/@rem;top: 148/@rem;left: 127/@rem;background: center / cover no-repeat;}
    }
}

.music{
    position: absolute; width: 100/@rem; height: 100/@rem; right: 20/@rem; top: 20/@rem; border-radius: 100%; background-size: 100%;z-index: 4;
    background: url("/src/img/face/audio.png") 0 0 / contain no-repeat; z-index:9999;
    &.on{
        animation: music 9.5s linear 0s normal none infinite;
    }
}

.share-cover{
    position: fixed;top: 0;width: 100%;max-width: @sreen;bottom: 0;background-color: rgba(0,0,0,.8);text-align: right;padding: 20/@rem;box-sizing: border-box;
    img{width: 60%;}
}

//提示框
.tip-box{
    .cover{position: fixed;top: 0;width: 100%;max-width: @sreen;bottom: 0;background-color: rgba(0,0,0,.2);}
    .cont{position: fixed;width: 580/@rem;height: 380/@rem;top: 50%;left: 50%;margin-left: -290/@rem;margin-top: -190/@rem;background: url("/src/img/face/tip-box-bg.png") center top/contain no-repeat;}
    .text{padding-top: 230/@rem;text-align: center;font-size: 36/@rem;}
}


@keyframes music{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@-webkit-keyframes music{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}